@use '@scss/common' as *;

.authorSlot {
  padding: 2.5rem 1rem 1rem;
  border-bottom: 1px solid var(--theme-border-color);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  .authorLabel {
    @include h5;
    & {
      margin: 0 0 0.5rem;
    }
  }
}

.label {
  @include h6;
}

.authorLink {
  text-decoration: none;

  &:focus {
    outline: none;
    text-decoration: underline;
  }
}

.author {
  display: flex;
  align-items: center;
  padding: 0 0 0.5rem 0;

  span {
    color: var(--theme-elevation-900);
    margin: 0;
    line-height: 1;
    letter-spacing: 0;
  }
}

.authorInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.twitter {
  @include small;
  & {
    color: var(--theme-elevation-500);
  }
}

.authorImage {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.guestSocials {
  display: flex;
  padding: 0.25rem 0;
  gap: 0.25rem;
}

@include mid-break {
  .authorSlot {
    padding: 0;
    border: none;
  }

  .authorLabel {
    display: none;
  }
}
